<template>
	<view class="pcStoreOption" >
		<view class="clerkManage-options" v-if="pcLoginInfo">
			<view class="clerkManage-option" style="padding-top: 10rpx">
				<view class="option-item">
					<view class="option-item-icon">
						<uni-icons type="wallet" size="22"></uni-icons>
					</view>
					<view class="option-item-title">门店名称</view>
					<view class="option-item-icons">
						{{ pcLoginInfo.nickname }}
					</view>
				</view>
				<view class="option-item">
					<view class="option-item-icon">
						<uni-icons type="wallet" size="22"></uni-icons>
					</view>
					<view class="option-item-title">账号</view>
					<view class="option-item-icons">
						{{ pcLoginInfo.username }}
					</view>
				</view>
				<view class="option-item">
					<view class="option-item-icon">
						<uni-icons type="wallet" size="22"></uni-icons>
					</view>
					<view class="option-item-title">PC端商家入口</view>
					<view class="option-item-icons">
						<u-link :href="pcLoginInfo.url" text="点击进入后台" :under-line="true"></u-link>
					</view>
				</view>
			</view>
		</view>
		
		<u-popup :show="show" @close="getclose" closeable>
			<view class="pcStoreOption-popup-header">
				{{pcLoginInfo?'修改密码':'账号设置'}}
			</view>
			<view class="pcStoreOption-popup">
				<uni-forms :modelValue="formData">
					<uni-forms-item label="账号" name="name" v-if="!pcLoginInfo" required>
						<uni-easyinput type="text" v-model="formData.username" placeholder="请输入账号" />
					</uni-forms-item>
					<uni-forms-item :label="pcLoginInfo?'新密码':'密码'" name="age" required>
						<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
					</uni-forms-item>
					<uni-forms-item label="确认密码" name="age" required>
						<uni-easyinput type="password" v-model="formData.repassword" placeholder="请确认密码" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="btn">
				<button @click="getstoresetPcPassword" style="background-color: #2979ff;color: #fff;" v-if="!pcLoginInfo">确认提交</button>
				<button @click="getstoreeditPcPassword" style="background-color: #2979ff;color: #fff;" v-else>编辑</button>
			</view>
		</u-popup>

		<view class="addAddress-btn" :style="bottomStyle">
			<u-button type="primary" color="#2979ff" :text="pcLoginInfo?'修改密码':'开通PC商家端'" shape="circle" @click="gotoAddress"></u-button>
		</view>
	</view>
</template>

<script>
import { storegetPcLoginInfo, storeeditPcPassword, storesetPcPassword } from '../../../api/home/index.js';
export default {
	data() {
		return {
			pcLoginInfo: null,
			show: false,
			formData: {
				username: '',
				password: '',
				repassword: ''
			}
		};
	},
	computed: {
		bottomStyle() {
			const systemInfo = uni.getSystemInfoSync();
			const { safeAreaInsets } = systemInfo;
			const bottomSafeAreaHeight = safeAreaInsets.bottom || 0;
			return `padding-bottom: ${bottomSafeAreaHeight ? bottomSafeAreaHeight + 'px' : '20rpx'}`;
		}
	},
	onLoad() {
		this.getstoregetPcLoginInfo();
		this.formData.type = this.$store.state.storeType;
	},
	methods: {
		getclose() {
			this.show = false;
		},
		async getstoregetPcLoginInfo() {
			try {
				const resData = await storegetPcLoginInfo({
					type: this.$store.state.storeType
				});
				this.pcLoginInfo = resData.data;
			} catch (e) {
				throw Error(e);
			}
		},

		// 确认提交
		async getstoresetPcPassword() {
			if(!this.formData.username){
				return uni.showToast({
					title:'账号不能为空',
					icon:'none'
				})
			}
			if(!this.formData.password){
				return uni.showToast({
					title:'密码不能为空',
					icon:'none'
				})
			}
			if(!this.formData.repassword){
				return uni.showToast({
					title:'确认密码不能为空',
					icon:'none'
				})
			}
			try {
				const resData = await storesetPcPassword(this.formData);
				uni.showToast({
					title: '操作成功',
					icon: 'none'
				});
				this.show = false;
				this.getstoregetPcLoginInfo();
			} catch (e) {
				throw Error(e);
			}
		},

		// 编辑
		async getstoreeditPcPassword() {
			try {
				const queryData = {
					password: this.formData.password,
					repassword: this.formData.repassword,
					type:this.formData.type
				}
				const resData = await storeeditPcPassword(queryData);
				uni.showToast({
					title: '操作成功',
					icon: 'none'
				});
				this.show = false;
				this.getstoregetPcLoginInfo();
			} catch (e) {
				throw Error(e);
			}
		},

		gotoAddress() {
			this.show = true;
		}
	}
};
</script>

<style scoped lang="scss">
.pcStoreOption {
	box-sizing: border-box;
	padding: 20rpx;
}
.addAddress-btn {
	position: fixed;
	bottom: 0rpx;
	left: 0px;
	width: 100%;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 0px 20rpx;
	padding-top: 20rpx;
	background-color: #fff;
}

.pcStoreOption-popup {
	box-sizing: border-box;
	padding: 20rpx;
}

.pcStoreOption-popup-header {
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 28rpx;
	color: #444;
	font-weight: bold;
}

.btn{
	box-sizing: border-box;
	padding: 20rpx;
}

.clerkManage-options {
	.clerkManage-option {
		background-color: #fff;
		border-radius: 24rpx;
		padding: 30rpx;
		padding-bottom: 0px;
		.clerkManage-option-header {
			margin-bottom: 20rpx;
			font-weight: bold;
		}
		.storeMap {
			margin-top: 20rpx;
			.images {
				height: 100rpx;
			}
		}
		.storeAddress {
			display: flex;
			align-items: center;
			height: 80rpx;
			font-size: 26rpx;
		}
		.option-item {
			height: 100rpx;
			display: flex;
			align-items: center;
			border-bottom: 1px #f3f3f3 solid;
			font-size: 28rpx;
			.option-item-icon {
				width: 55rpx;
			}
			.option-item-title {
				flex: 1;
			}
			.option-item-icons {
				width: 200rpx;
				text-align: right;
				font-size: 24rpx;
				color: #999;
			}
		}
	}
}
</style>
